<template>
    <div class="wrap">
      <navbar></navbar>
      <div class="content_wrap clearfix">
        <div class="side_bar">
          <side-bar></side-bar>
        </div>
        <div class="content">
          <router-view></router-view>
        </div>
      </div>
      <!--<el-row :gutter="0" type="flex">
        <el-col :xs="8" :sm="8" :md="6" :lg="4">
          <side-bar></side-bar>
        </el-col>
        <el-col :xs="16" :sm="16" :md="18" :lg="20" >
          <router-view class="margin-top"></router-view>
        </el-col>
      </el-row>-->
    </div>
</template>

<script>
  import Navbar from '@/components/Navbar'
  import Sidebar from '@/components/Sidebar'
  export default {
    components:{
      Navbar:Navbar,
      SideBar:Sidebar
    }
  }
</script>


<style lang="scss" scoped>
  @import '~styles/variables.scss';
  .wrap {
    height: 100%;
    width: 100%;
  }
  .content_wrap{
    height:100%;
    .side_bar{
      position: absolute;
      left: 0;
      top: 53px;
      bottom: 0;
      overflow-y: auto;
    }
    .side_bar::-webkit-scrollbar{width:0;}
    .content{
      padding:10px;
      overflow-y: auto;
      position: absolute;
      left: 200px;
      top: 53px;
      right: 0;
      bottom: 0;
    }
  }
</style>
